<!DOCTYPE HTML>
<html>
<head>
    {include file="common:meta"}
</head>
<style>
    #remark{
        width: 100%;
        text-align: center;
        margin:20px auto;
        display: none;
    }
    #num{
        width: 50%;
        height: 50%;
        resize: none;
        text-align: center;
    }
    .textarea-content{
        width: 90%;
        margin:0 auto 20px;
    }
    #tab-2{
        display: none;
    }
    #tab-3{
        display: none;
    }
</style>
<body>
<div class="page-container">
    <div class=" float-e-margins">
        <div class="ibox-content">

            <div class="tabs-container">

                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" class="tab-1" aria-expanded="true">第{$loop[0]}轮(当前轮)</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2"  class="tab-2" aria-expanded="false">第{$loop[1]}轮</a>
                    </li>
                    {if isset($loop[2])}
                    <li class=""><a data-toggle="tab" href="#tab-3" class="tab-3" aria-expanded="false">第{$loop[2]}轮</a>
                    </li>
                    {/if}

                </ul>
                <div class="tab-content">
                    <div class=" tab-pane active" id="tab-1">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>奖品</th>
                                <th>剩余数量</th>
                                <!--<th>操作</th>-->
                            </tr>
                            </thead>
                            <tbody>
                            {volist name='data[0]' id='vo' key='k'}
                            <tr>
                                <input type="hidden" value="{$vo['id']}">
                                <input type="hidden" value="{$loop[0]}">
                                <td>{$vo['gift_name']}</td>
                                <td>{$vo['num']}</td>
                                <!--<td><button class="fetch-out btn btn-info btn-sm" value="1">拿出</button></td>-->
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                    </div>

                    <div class=" tab-pane active" id="tab-2">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>奖品</th>
                                <th>剩余数量</th>
                                <!--<th>操作</th>-->
                            </tr>
                            </thead>
                            <tbody>
                            {volist name='data[1]' id='vo' key='k'}
                            <tr>
                                <input type="hidden" value="{$vo['id']}">
                                <input type="hidden" value="{$loop[1]}">
                                <td>{$vo['gift_name']}</td>
                                <td>{$vo['num']}</td>
                                <!--<td><button class="fetch-out btn btn-info btn-sm" value="2">拿出</button></td>-->
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                    </div>


                    {if isset($loop[2])}

                    <div class=" tab-pane active" id="tab-3">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>奖品</th>
                                <th>剩余数量</th>
                                <!--<th>操作</th>-->
                            </tr>
                            </thead>
                            <tbody>
                            {volist name='data[2]' id='vo' key='k'}
                            <tr>
                                <input type="hidden" value="{$vo['id']}">
                                <input type="hidden" value="{$loop[2]}">
                                <td>{$vo['gift_name']}</td>
                                <td>{$vo['num']}</td>
                                <!--<td><button class="fetch-out btn btn-info btn-sm" value="3">拿出</button></td>-->
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                    </div>
                    {/if}

                </div>

            </div>
        </div>
    </div>
</div>

<div id="remark">
    <div class="textarea-content">
        <input class="form-control" type="number" id="num" placeholder="请选出拿出的数量">
        <input class="form-control" type="hidden" id="prize_id" value="">
        <input class="form-control" type="hidden" id="queue" value="">
        <input class="form-control" type="hidden" id="current_loop" value="">
    </div>
    <button class="btn btn-success" id="sure-btn">确定</button>
</div>

<input type="hidden" name="gold_id" value="{$gold_id}">
<input type="hidden" name="mode_type" value="{$mode_type}">
{include file="common:footer"}
<script>

    $('.tab-2').click(function () {
        $('#tab-2').css('display','block');
        $('#tab-3').css('display','none');
    });
    $('.tab-3').click(function () {
        $('#tab-3').css('display','block');
        $('#tab-2').css('display','none');
    });
    $('.tab-1').click(function () {
        $('#tab-3').css('display','none');
        $('#tab-2').css('display','none');
    });


    $('.fetch-out').click(function () {
        var prize_id = $(this).parent().siblings().eq(0).val();
        var current_loop = $(this).parent().siblings().eq(1).val();
        var queue = $(this).attr('value');
        $('#prize_id').val(prize_id);
        $('#queue').val(queue);
        $('#current_loop').val(current_loop);

        layer.open({
            title:['选择个数','font-size:18px;font-weight:700;font-family:楷体;'],
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['380px', '200px'], //宽高
            cancel:function(){
                $('#remark').css('display','none');
            },
            content: $('#remark')
        });
    });

    $('#sure-btn').click(function () {
        var prize_id =  $('#prize_id').val();
        var num = $('#num').val();
        var queue = $('#queue').val();
        var current_loop = $('#current_loop').val();
        var gold_id = $("input[name='gold_id']").val();
        var mode_type = $("input[name='mode_type']").val();
        $.ajax({
            type: 'get',
            dataType: 'json',
            url: '/RemainBoxDel',
            data: {
                'prize_id': prize_id,
                'num': num,
                'gold_id': gold_id,
                'mode_type': mode_type,
                'queue': queue,
                'current_loop': current_loop
            },
            success: function (re) {
                if (re.code === 100) {
                    layer.msg(re.msg, {icon: 1, time: 2000});
                    window.location.reload();
                } else {
                    layer.msg(re.msg);
                }
            },
            error: function (data) {
                console.log(data.msg);
            }
        });
    });
</script>
</body>
</html>